import React from 'react'
import { Button, Modal, Table, Space, Upload } from 'antd'
import { UploadOutlined } from '@ant-design/icons'
import { useDispatch, useSelector } from 'react-redux';

import { getModelVersions } from '../../../redux/actions/pmml/pmmlAction'
import ModalFunc from '../../../components/modal/modal'

const EditBtn = props => {

    const { visible, open, close } = ModalFunc()
    const { item } = props

    // 获取store中的状态值
    const versions = useSelector(state => state.versionStateReducer.versions)

    // 获取store对象中dispatch的引用
    const dispatch = useDispatch()

    const columns = [
        {
            title: '版本',
            dataIndex: 'version',
            key: 'version',
            render: text => {
                return "v-" + text
            }
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
        },
        {
            title: '是否使用',
            dataIndex: 'status',
            key: 'status',
            render: text => {
                return (text === 1) ? '使用中' : '未使用'
            }
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <Space size="middle">
                <a>下载</a>
                <a>删除</a>
                </Space>
            )
        }
    ]

    function onOk () {
        
    }

    function handleClick () {
        open()
        /** 发起请求获取版本文件 */
        dispatch(getModelVersions(item.id))
    }

    return (
        <>
            <Button
                key="edit"
                size="small"
                type="primary"
                onClick={handleClick}
            >
                管理
            </Button>
            <Modal
                title={`【${item.name}】模型版本管理`}
                visible={visible}
                onOk={onOk}
                onCancel={close}
                width={600}
                maskClosable={false}
            >
                <Table columns={columns} dataSource={versions} pagination={false} />
                <Upload
                    // fileList={fileList}
                    // beforeUpload={beforeUpload}
                    // onRemove={onRemove}
                    maxCount={1}
                >
                    <div style={{width: '550px'}}>
                        <Button icon={<UploadOutlined />} block={true}>选择模型文件(ZIP格式)</Button>
                    </div>
                </Upload>
            </Modal>
        </>
    )
}

export default EditBtn